<template>
  <div class="sdy-home-banner">
    <van-swipe class="my-swipe box" :autoplay="3000" indicator-color="red">
      <van-swipe-item v-for="item in bannerList" :key="item.bannerid">
        <img :src="item.img">
      </van-swipe-item>
    </van-swipe>
  </div>
</template>

<script name="sdyHomeBanner" setup lang="ts">
// 发送请求, 拿到轮播图数据渲染页面
import { getBannerList } from '../../../model/goods'
import { onMounted, ref } from 'vue'

// 定义接口
interface BannerInfo {
  img?: string
  alt?: string
  link?: string
  bannerid?: string
  flag?: boolean
}

interface Response {
  code: string
  data: Array<BannerInfo>
}

// 准备一个变量, 保存轮播图列表
const bannerList = ref<Array<BannerInfo>>([])

// 挂载页面完毕, 发送请求, 请求轮播图列表
onMounted(async () => {
  const res = await getBannerList()
  if ((res as unknown as Response).code !== '200') return
  bannerList.value = res.data
})
</script>

<style lang="scss" scoped>
.sdy-home-banner {
  height: 170px;
  position: relative;
  margin-top: -14px;
  margin-bottom: 10px;

  // 轮播图后的背景
  &:before {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    background-color: rgb(207, 31, 31);
    border-radius: 0 0 400px 400px / 0 0 40px 40px;
    transform: translateY(-50px); 
    position: absolute;
    z-index: 1;
  }

  > .box {
    width: 100%;
    height: 100%;
    z-index: 2;
    position: relative;
    overflow: hidden;
    width: 370px;
    margin: 10px auto;
  }
}

img {
  width: 100%;
  height: 100%;
  display: block;
}
</style>
